<template>
  <ul class="footer" :style="{background:bgColor}">
    <li>
      <router-link to="/movie/movieList">电影</router-link>
    </li>
    <li>
      <router-link to="/music">音乐</router-link>
    </li>
    <li>
      <router-link to="/book">图书</router-link>
    </li>
    <li>
      <router-link to="/picture">照片</router-link>
    </li>
  </ul>
</template>

<script>
export default { props: ['bgColor'] };
</script>

<style  scoped>
.footer {
  background: #2f3542;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 1.2rem;
  line-height: 1.2rem;
  display: flex;
  border-radius: 0.1rem 0.1rem 0 0;
}
.footer li {
  flex-grow: 1;
  text-align: center;
  color: #eee;
}
.footer li a {
  color: #ced6e0;
}
.footer li a.router-link-active {
  color: #ffff;
  font-weight: bold;
  font-size: larger;
}
</style>